<template>
    <el-container  class="el-container" id="el-container">
      <div>
        <div id="he-plugin-standard"></div>
      </div>
      <el-header class="header">
        <div :class="{'header-container':true,'scroll-header':scrollHeader}">
        <div class="logo-container" >
        <img src="..\assets\images\logo.gif" />
        </div>
        <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            text-color="black"
            active-text-color="#ee9d26"
        >

          <el-menu-item index="/AllMain"  @click="$router.push('/')">首页</el-menu-item>
          <el-sub-menu index="2">
            <template #title>机场信息</template>
            <el-sub-menu index="2-1">
              <template #title>离港航班</template>
              <el-menu-item index="2-2" @click="$router.push({name:'inFlight'})">离港中转航班</el-menu-item>
              <el-menu-item index="2-3" @click="$router.push('/inFlightNext')">离港直达航班</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="3-1">
              <template #title>进港航班</template>
              <el-menu-item index="3-2" @click="$router.push({name:'abroadFlight'})">进港中转航班</el-menu-item>
              <el-menu-item index="3-3" @click="$router.push({name:'abroadFlightNext'})">进港直达航班</el-menu-item>
            </el-sub-menu>
          </el-sub-menu>
          <el-menu-item index="4" @click="$router.push({name:'CheckedLuggage'})">行李托运</el-menu-item>
          <el-menu-item index="5">辅助工具</el-menu-item>
          <el-menu-item index="6" @click="contentUs">联系我们</el-menu-item>
          <el-menu-item index="/login"  @click="$router.push({name:'login'})">登录/注册</el-menu-item>
          </el-menu>
        </div>
        <div class="carousel-container">
          <el-carousel height="600px" :interval="3000" indicator-position="outside" arrow="always" class="el-carousel" :pause-on-hover="false">
            <el-carousel-item v-for="img in images" :key="img.id">
              <!--            <img :src ="img.url" style="width: 99%;"/>-->
              <div class="carousel-image" :style="`background-image: url(${img.url})`"></div>
            </el-carousel-item>
          </el-carousel>
        </div>

      </el-header>
      <!-- 自定义天气组件 -->
      <Weather style="z-index: 1;margin: 32px 10px;"></Weather>
      <el-main style="--el-main-padding:120px " class="el-main" >
        
        
        <div id="he-plugin-simple"></div>

<!--        <div id="he-plugin-simple"></div>-->
        <el-menu
            :default-active="activeIndex"
            class="el-menu-demo1"
            mode="horizontal"
            :ellipsis="false"
            @select="handleSelect"
        >
          <div class="flex-grow" />
          <el-menu-item index="0" @click="this.selectLabel=0">离港航班</el-menu-item>
          <div class="flex-grow1"/>
          <el-menu-item index="1" @click="this.selectLabel=1">进港航班</el-menu-item>
          <div class="flex-grow1"/>
          <div >
            <el-select v-model="form.type" class="m-2" placeholder="Select">
              <el-option selected value="直达">直达</el-option>
              <el-option value="中转">中转</el-option>
            </el-select>
          </div>
        </el-menu>
        <div class="card-container">
          <el-card class="box-card" >
            <div class="txt" >快速航班查询</div>
            <el-form-item class="date-select">
              <!--            <label>日期</label>-->
              <el-date-picker
                  type="date"
                  placeholder="请选择日期"
                  v-model="form.dtime"
                  style="width: 200px;"
                  @change="updateDateTime"
              ></el-date-picker>
            </el-form-item>
            <!--         <div class="search-input">-->
            <el-form  ref="form" :model="form" >
              <el-input class="elInner" placeholder="请输入航班号" style="width: 190px;" v-model="form.dfltFlno"></el-input>
            </el-form>
            <!--         </div>-->
            <el-button class="btn1" type="primary" @click="onSubmit"
            >
              <el-icon><Search /></el-icon> 查询</el-button
            >
          </el-card>
        </div>
<!--        <div id="information" class="section"></div>-->
      </el-main>
 
      <el-footer style="--el-footer-padding: 0 0;" class="el-footer">
        <div class="bottombar-container">
      <div class="content">
        <div class="box">
          <dl>
            <dt >航班信息</dt>
            <dd>出发航班</dd>
            <dd>到达航班</dd>
          </dl>
        </div>
        <div class="box"><dl>
          <dt >交通指南</dt>
          <dd>停车场</dd>
          <dd>市区班车</dd>
          <dd>旅客直通车</dd>
          <dd>出租车</dd>
          <dd>摆渡车</dd>
        </dl></div>
        <div class="box">
          <dl>
          <dt >机场周边</dt>
          <dd>美食服务</dd>
          <dd>旅游景区</dd>
        </dl></div>
        <div class="box">
          <dl>
            <dt >旅客须知</dt>
            <dd>乘机指南</dd>
            <dd>爱心服务</dd>
            <dd>失物招领</dd>
            <dd>常用电话</dd>

          </dl></div>
        <div class="box">
          <dl>
            <dt >航班延误</dt>
            <dd>联系我们</dd>
            <dd>改签退票</dd>
          </dl>
        </div>
        <div class="box last">
          <dl>
            <dt >关注我们</dt>
            <dd>
              <img src="/src/assets/images/gongzhonghao.png" alt="">
            </dd>
            <dd>微信添加公众号</dd>
          </dl>
        </div>
      </div>
        </div>
      </el-footer>
    </el-container>

    <el-dialog v-model="tcontentUs" width="50%">
      <p style="text-align: center;font-size: 24px;">组长：徐锐</p>
      <p style="text-align: center;font-size: 24px;">组员：韩龙华、李佳怡、冯旭楠、张燕。</p>
    </el-dialog>
</template>
<style scoped>


.el-footer{
  position: absolute;
  top: 900px;
  left: 0;
  right: 0;
  bottom: 0;
}
.el-main{
  position: absolute;
  top: 500px;
  left: 0;
  right: 0;
  bottom: 0px;
  height: 400px;
  overflow-y: hidden;
}
.logo-container {
  position: absolute;
  top: 20px;
  left: 30px;
  z-index: 2; /* 调整logo容器的层级 */
}
.el-container{
  /*display: flex;*/
  /*flex-direction: column;*/
  /*min-height: 100vh;*/
  overflow-x: hidden;
  overflow-y: auto;
}
.m-2{
  margin-top: 12px;
  width: 110px;
}
.flex-grow{
  flex-grow: 0.4;
}
.flex-grow1{
  flex-grow: 0.1;
}
.header-container{
  background-color: rgba(255, 255, 255, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100px;
  z-index: 2;
}
.scroll-header{
  height: 85px;
  background-color: #fff;
  transition: height 0.5s ease, background-color 0.5s ease;
}
.header {
  /*font-size: 20px;*/
  /*background-color: rgba(255, 255, 255, 0.5);*
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative; /* 将 el-header 设置为相对定位 */
}
.carousel-container{
  position: absolute; /* 将走马灯容器设置为绝对定位 */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.carousel-image {
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
}
.el-menu-demo1{

}
.el-menu-demo{
  background-color: transparent !important;
  color: #fff;
  width: 600px;
  position: absolute;
  top: 30px;
  right: 60px;
  border: none;
  z-index: 2;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.card-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.txt{
  font-size: 20px;
  font-family: MicrosoftYaHei-Bold,MicrosoftYaHei;
  font-weight: 700;
  color: #2b2b2b;
  line-height: 52px;
  padding-right: 20px;
  display: inline-block;
}
.box-card {
  width: 900px;
  height: 90px;
}

.elInner {
  display: inline-block;
  position: relative;
  bottom: 52px;
  right: 308px;
  float:right;
  font-size: 14px;
  font-family: MicrosoftYaHei-Bold,MicrosoftYaHei;
  font-weight: 700;
  color: #2b2b2b;
  border: 1px solid #dcdfe6;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  transition: border-color.2s cubic-bezier(.645,.045,.355,1);
}
.btn1{
  display: inline-block;
  position: relative;
  left: 590px;
  bottom: 52px;
  width: 200px;
  color: #184789;
}

.bottombar-container{
  min-width: 1120px;
  overflow: hidden;
  background: #184789;
  padding-bottom: 30px;
  position: relative;
}
.content {
  width: 1120px;
  margin: 0 auto;
  padding-right: 40px;
  padding-top: 60px;
  display: flex;
  justify-content: space-between;
}
.box{
  width: 160px;
  /*color: white;*/
}
.bottombar-container .content .box dt{
  font-size: 16px;
  font-family: MicrosoftYaHei-Bold,MicrosoftYaHei;
  font-weight: 700;
  color: white;
  line-height: 22px;
  margin-bottom: 23px;
}
dl {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}
.bottombar-container .content .box dd{
  margin: 0;
  font-size: 14px;
  font-family: MicrosoftYaHei;
  color: #fff;
  line-height: 18px;
  margin-bottom: 12px;
  cursor: pointer;
}
.bottombar-container .content .box dd img{
  width: 122px;
  height: 122px;
}

.date-select{
  display: inline-block;
  position: relative;
}

</style>



<script>
import img_1 from "./../assets/images/img_1.png";
import img_2 from "./../assets/images/img_2.png";

import { ElMessageBox } from 'element-plus'
import axios from "axios";
import { ref } from 'vue'

import Weather from "./Weather.vue";

export default {
  components: {
    Weather
  },
  name: "test",
  data(){
    return {
      tcontentUs:false,
      scrollHeader:false,
      activeIndex:'0',
      selectLabel:0,
      images: [
        { id: 1, url: '/src/assets/images/bgfly1.jpg' },
        {id: 2, url: '/src/assets/images/tj1.png'},
        {id: 3, url: '/src/assets/images/img_2.png'},
        {id: 4, url: '/src/assets/images/tj.jpg'},
        {id: 5, url: '/src/assets/images/bgfly7.jpg'},
        {id: 6, url: '/src/assets/images/bgfly6.jpg'}

      ],
      form: {
        type: "直达",
        dfltFlno: "",
        dtime: "2017-06-01T00:00:00.000Z",
      },
    };
  },
  methods: {
    handleScroll(){
      // 获取滚动的垂直位置
      const scrollY = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      // 判断滚动位置是否超过表头的位置
      this.scrollHeader = scrollY > 100 // 这里的 值 是一个示例的值，请根据实际情况调整
      const header = document.querySelector('.header-container')

      if (this.scrollHeader) {
        header.classList.add('scroll-header')
      } else {
        header.classList.remove('scroll-header')
      }
      // 可根据需要添加其他样式的修改逻辑
    },
    onSubmit() {
      switch (this.selectLabel){
        case 0:
          if(this.form.type=="直达"){
            this.$router.push({name:"inFlight",query:{dfltFlno:this.form.dfltFlno,dtime:this.form.dtime}})
          } else {
            this.$router.push({name:"inFlightNext",query:{dfltFlno:this.form.dfltFlno,dtime:this.form.dtime}})
          }
          break;
        case 1:
          if(this.form.type=="直达"){
            this.$router.push({name:"abroadFlight",query:{dfltFlno:this.form.dfltFlno,dtime:this.form.dtime}})
          } else {
            this.$router.push({name:"abroadFlightNext",query:{dfltFlno:this.form.dfltFlno,dtime:this.form.dtime}})
          }
          break;
      }
    },
    contentUs() {
      this.tcontentUs=true;
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeUnmount() {
    // 在组件销毁前移除滚动事件监听
    window.removeEventListener('scroll', this.handleScroll)
  },
  created(){
    //和风天气插件调用
    window.WIDGET = {
      "CONFIG": {
        "modules": "01234",
        "background": "1",
        "tmpColor": "FFFFFF",
        "tmpSize": "16",
        "cityColor": "FFFFFF",
        "citySize": "16",
        "aqiColor": "FFFFFF",
        "aqiSize": "16",
        "weatherIconSize": "24",
        "alertIconSize": "18",
        "padding": "10px 10px 10px 10px",
        "shadow": "0",
        "language": "auto",
        "fixed": "false",
        "vertical": "top",
        "horizontal": "left",
        "key": "373e001db2cf45a48e4eba7bd89340d9"
      }
    };

    (function (d) {
      var c = d.createElement('link');
      c.rel = 'stylesheet';
      c.href = 'https://widget.heweather.net/simple/static/css/he-simple.css?v=1.4.0';
      var s = d.createElement('script');
      s.src = 'https://widget.heweather.net/simple/static/js/he-simple.js?v=1.4.0';
      var sn = d.getElementsByTagName('script')[0];
      sn.parentNode.insertBefore(c, sn);
      sn.parentNode.insertBefore(s, sn);
    })(document);
  },
};
</script>